<template>
     <el-popover
    ref="popover"
    trigger="focus"
    placement="bottom-start"
    width="265"
  
    transition=""
    :visible-arrow="false">
    <right-tree-new :support-type="supportType" @node-change="nodeChange"></right-tree-new>
    <el-input type="text"  clearable readonly slot="reference">
       <template v-for="(item,index) in values.objectNames">
         <el-tag slot="prefix" 
         @close="handleClose(item)" 
         :key="item" 
         style="margin-right: 3px" 
         :closable="index!==0" 
         disable-transitions
         type="success">
         <i :class="iconClass" class="iconClass"></i>
         {{item}}
         </el-tag>
      </template>
    </el-input>
    </el-popover>
      
</template>
<script>
import rightTreeNew from '@/views/platform/layout/components/right/rightTree'
export default {
  created() {
    if (this.supportType.needDefault && this.supportType.needDefault === true) {
      const node = {}
      if (this.orgTree) {
        node.objectIds = [this.orgTree.id]
        node.objectNames = [this.orgTree.label]
        node.objectProps = []
        this.lastSelectType = 'org'
        this.values = node
        this.emitValue()
      }
      this.values = node
    }
  },
  data() {
    return {
      values: {
        objectIds: [],
        objectNames: [],
        objectProps: []
      },
      lastSelectType: null
    }
  },
  components: { rightTreeNew },
  props: {
    supportType: {
      type: Object
    },
    value: { // nodeDefault:{objectIds:[], objectNames:[],objectType:''}
      type: Object
    }
  },
  computed: {
    iconClass() {
      return 'iconfont icon-' + this.lastSelectType
    },
    orgTree() {
      if (this.$store.getters.orgTree) {
        return this.$store.getters.orgTree
      } else {
        return null
      }
    }
  },
  watch: {
    orgTree: {
      handler: function(value) {
        const node = {}
        node.objectIds = [value.id]
        node.objectNames = [value.label]
        node.objectProps = []
        this.lastSelectType = 'org'
        this.values = node
        this.emitValue()
      },
      deep: true
    },
    value: {
      handler: function(val) {
        if (val !== null && val !== undefined && val !== '') {
          this.values = val
          // this.emitValue()
        }
      },
      deep: true
    }

  },
  methods: {
    nodeChange(queryParam) {
      if (!this.lastSelectType || queryParam.objectType === this.lastSelectType) {
        if (this.values.objectIds.indexOf(queryParam.objectId) === -1) {
          if (this.values.objectIds.length >= 5) {
            this.$alert(this.$t('common.mostSopportCount'), this.$t('common.prompt'), {
              confirmButtonText: this.$t('common.confirm')
            })
          } else {
            this.lastSelectType = queryParam.objectType
            if (this.isMulti) {
              this.values.objectIds.push(queryParam.objectId)
              this.values.objectNames.push(queryParam.objectName)
              this.values.objectProps.push(queryParam.objectProp)
            } else {
              this.values.objectIds = [queryParam.objectId]
              this.values.objectNames = [queryParam.objectName]
              this.values.objectProps = [queryParam.objectProp]
            }
          }
        }
        this.emitValue()
      } else {
        this.lastSelectType = queryParam.objectType
        this.values.objectIds = [queryParam.objectId]
        this.values.objectNames = [queryParam.objectName]
        this.values.objectProps = [queryParam.objectProp]
        this.emitValue()
      }
    },
    handleClose(tag) {
      this.values.objectIds.splice(this.values.objectNames.indexOf(tag), 1)
      this.values.objectNames.splice(this.values.objectNames.indexOf(tag), 1)
      this.values.objectProps.splice(this.values.objectNames.indexOf(tag), 1)
      this.emitValue()
    },
    checkExist(org, orgLs) {
      let isNeed = true
      orgLs.forEach(element => {
        if (org.length > element && org.indexOf(element) !== -1) {
          isNeed = false
          return false
        }
      })
      return isNeed
    },
    emitValue() {
      let emitValue = { }
      if (this.lastSelectType === 'org') { // 当为单位多选时，把父子节点同时选取的，把子节点给去掉
        const objectIds = []
        const objectNames = []
        const objectProps = []
        this.values.objectIds.forEach((element, index, array) => {
          if (this.checkExist(element, array)) {
            objectIds.push(element)
            if (this.values.objectNames[index]) {
              objectNames.push(this.values.objectNames[index])
            }
            if (this.values.objectProps) {
              objectProps.push(this.values.objectProps[index])
            }
          }
        })
        emitValue.objectIds = objectIds
        emitValue.objectNames = objectNames
        emitValue.objectProps = objectProps
      } else {
        emitValue = this.values
      }
      emitValue.objectType = this.lastSelectType
      this.$emit('input', emitValue)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
    .iconClass{
      font-size: 12px;
      margin-right: 3px;
      color: $blue
    }
</style>


